<template>
	<view class="page-background">
		<eggMachine></eggMachine>
		<view class="swiper">
			<!-- 礼物轮播图 -->
			<view class="swiper-title">
				礼物预览:
			</view>
			<swiper class="poster-swiper" :indicator-dots="false" :autoplay="true" :interval="1000" :duration="1000"
				:circular="true" display-multiple-items="4">
				<swiper-item v-for="(poster, index) in posterList" :key="index">
					<image :src="poster" class="poster-image" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
			
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import eggMachine from '../eggMachine/eggMachine.vue';
	// 礼物图片列表
	const posterList = ref([
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/19/43/d04af348-fe43-4210-9c76-ec4ff1a32dae.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/7/b7ade72b-35b2-452f-be26-3d0eddc5ff40.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/16/697471cf-c32b-44e5-a02f-11d40dc712cc.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/24/ee8f23ac-9cac-44b7-bae0-deaeb15731a7.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/28/18228614-b369-4391-b9d4-2e63157b2af8.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/33/77f499c9-4a05-4859-9a4e-de9c36affaeb.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/33/3e0d8e13-2b24-4891-a3ae-538d659ff09b.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/32/9daf9d7b-b075-4bc4-a88e-23c5264c3b00.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/31/fe67003a-d421-459a-b47c-ee1330f35998.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/30/982f3800-6ec8-42b9-a3d2-1b4c16ee6807.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/29/17cff8ff-02ec-492e-ab7d-100449d5c1ae.jpg',
		'https://blindstore.oss-cn-hangzhou.aliyuncs.com/2025/FEBRUARY/6/20/28/18228614-b369-4391-b9d4-2e63157b2af8.jpg',
	]);
</script>

<style lang="scss" scoped>
	.page-background {
		background-image: url('https://blindstore.oss-cn-hangzhou.aliyuncs.com/static/background/%E6%89%AD%E8%9B%8B%E6%9C%BA%E8%83%8C%E6%99%AF.png');
		box-sizing: border-box;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		/* 可根据需求设置高度 */
		min-height: 100vh;
	}
	.swiper{
		position: relative;
		bottom: 0rpx;
		.swiper-title {
			font-size: 48rpx;
			font-weight: 700;
			margin: 0 0 0 10rpx;
			color: #aaffff;
		}
		
		/* 设置轮播图容器的宽度和高度 */
		.poster-swiper {
			width: 100%;
			height: 200rpx;
		
			/* 这里可以根据需要调整轮播图的高度 */
			/* 设置图片的宽度和高度 */
			.poster-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 40rpx;
			}
		}
	}
</style>